Stacks এবং Positioned Widgets

Flutter এ Stack এবং Positioned Widget ব্যবহার করে একের উপরে এক (overlapping) বা নির্দিষ্ট অবস্থানে Widgets গুলোকে বিন্যস্ত করা যায়। এগুলো মূলত এমন UI ডিজাইন করতে সাহায্য করে যেখানে বিভিন্ন Widget একে অপরের উপর স্থাপন করা হয় বা নির্দিষ্ট পজিশনে থাকে।

Stack Widget:

Stack হলো একটি Layout Widget, যা তার চাইল্ড Widget গুলোকে একের উপরে এক রাখে। এটি Widgets গুলোকে একটি স্তর হিসেবে (layers) সাজিয়ে স্ক্রিনে প্রদর্শন করে। Stack Widget ব্যবহার করে আপনি জটিল UI তৈরি করতে পারেন, যেমন কার্ড, ডায়ালগ বক্স, ব্যানার, এবং ইমেজের উপরে টেক্সট।

Stack এর বৈশিষ্ট্য:

• Stack এ Widgets গুলো overlay (একটির উপরে আরেকটি) অবস্থায় থাকে।
• এর প্রতিটি চাইল্ড Widget তার প্যারেন্টের আকার অনুযায়ী অবস্থান নেয়।
• Widgets গুলো Stack এর মধ্যে তাদের পজিশনিং অনুযায়ী সাজানো হয় (Top-Left, Top-Right ইত্যাদি)।

Stack এর উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack Example')),
        body: Center(
          child: Stack(
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.green,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• এই উদাহরণে, Stack এর ভিতরে তিনটি Container Widget রয়েছে। প্রতিটি Container একে অপরের উপর overlay হিসেবে সাজানো হয়েছে।
• বড় Container টি নিচে এবং ছোট Container গুলো তার উপরে থাকে।

Positioned Widget:

Positioned হলো Stack এর একটি চাইল্ড Widget, যা Stack এর ভিতরে থাকা Widgets গুলোর নির্দিষ্ট অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। Positioned Widget ব্যবহার করে আপনি একটি Widget কে Stack এর মধ্যে নির্দিষ্ট পজিশনে রাখতে পারেন, যেমন স্ক্রিনের টপ, বটম, লেফ্ট বা রাইট সাইডে।

Positioned এর বৈশিষ্ট্য:

• Positioned শুধুমাত্র Stack এর চাইল্ড হিসেবে ব্যবহার করা যায়।
• top, bottom, left, এবং right প্রপার্টির মাধ্যমে Widget এর নির্দিষ্ট পজিশন নির্ধারণ করা হয়।
• Positioned Widget Stack এর ভিতরে Widget এর অবস্থান নির্দিষ্ট করতে ব্যবহৃত হয়।

Positioned এর উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Positioned Example')),
        body: Center(
          child: Stack(
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
              Positioned(
                top: 20,
                left: 20,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
              ),
              Positioned(
                bottom: 0,
                right: 0,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• এখানে, একটি Stack রয়েছে যার মধ্যে তিনটি Container Widget রয়েছে। প্রথম Container টি সম্পূর্ণ Stack এলাকা দখল করে এবং লাল রঙে দেখানো হয়েছে।
• দ্বিতীয় Container টি Positioned Widget এর মাধ্যমে Stack এর top: 20 এবং left: 20 পজিশনে রাখা হয়েছে।
• তৃতীয় Container টি Positioned Widget এর মাধ্যমে Stack এর bottom: 0 এবং right: 0 পজিশনে রাখা হয়েছে।

Stack এবং Positioned Widgets এর সমন্বয়:

• Stack Widget এবং Positioned Widget একসাথে ব্যবহার করে আপনি জটিল এবং কাস্টম UI ডিজাইন করতে পারেন, যেমন কার্ড ডিজাইন যেখানে ইমেজের উপর টেক্সট রাখা হয়, বা একটি ব্যানার যেখানে বাটন স্ক্রিনের নিচে স্থাপন করা হয়।
• Positioned Widget ব্যবহার করে স্ক্রিনের নির্দিষ্ট স্থানে কোনো Widget রাখা যায়, যা Responsive ডিজাইন তৈরিতে সাহায্য করে।

Stack এবং Positioned এর ব্যবহারিক ক্ষেত্র:

• ইমেজ ওভারলে: ইমেজের উপর টেক্সট বা বাটন স্থাপন করতে।
• কার্ড ডিজাইন: কার্ডের উপরের অংশে বিভিন্ন আইটেম সাজাতে।
• ডায়ালগ এবং পপআপ: স্ক্রিনের নির্দিষ্ট অংশে ডায়ালগ বক্স বা পপআপ তৈরি করতে।

Flutter এ Stack এবং Positioned Widget ব্যবহার করে একটি জটিল এবং সুন্দর UI তৈরি করা যায়। এগুলো বিশেষ করে এমন ডিজাইন এবং UI উপাদানের জন্য উপযোগী, যেখানে Widgets গুলো overlay বা নির্দিষ্ট পজিশনে থাকে।